<template>
  <div class="app-main">
    <img src="../../../assets/img/duanwu/bird.png" alt="" class="img-bird">
    <div class="section-main clearfix" :class="[imgUrl ? '':'noimg-div']">
      <div class="title">
        <div  class="cutimg" v-if="imgUrl">
          <div  class="img-div">
            <img :src="imgUrl" alt="">
          </div>
        </div>
        <div class="font" >
          <img src="../../../assets/img/duanwu/font.png" alt="">
        </div>
        <div class="title-content">
            <p>农历五月初五  祝您端午快乐</p>
        </div>
      </div>
      <p class="content" v-text="content"></p>
    </div>
    <div class="section-bottom">
      <img src="../../../assets/img/duanwu/bottom.png" alt="" class="img-fenche">
        <div class="show-div" @click="suremake">
          <btn-router
            :background='require("../../../assets/img/duanwu/btn1.png")'
            color="#8b8277"
            right='-0.1rem'
            top='-0.1rem'
            :width=284
            :height=87
            size='14'
          >生成贺卡</btn-router>
        </div>
        <div class="back-div" @click="goback" >
          <btn-router
            :background='require("../../../assets/img/duanwu/btn1.png")'
            color="#8b8277"
            right='-0.1rem'
            top='-0.1rem'
            :width=284
            :height=87
            size='14'
          >返回上级</btn-router>
        </div>
    </div>
  </div>
</template>

<script>
import btnRouter from '@/components/routerButton'// 跳转按钮组件
import { mapState } from 'vuex'

console.log(mapState)
export default {
  name: 'Show',
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      imgUrl: state => state.file.imgUrl,
      content: state => state.file.content
    })
  },
  components: {
    btnRouter
  },
  methods: {

    goback () {
      this.$router.go(-1)
    },
    suremake () {
      if (this.imgUrl) {
        var imgfile = this.convertBase64UrlToBlob(this.imgUrl)
        console.log(imgfile)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .app-main{overflow: hidden;background:url(../../../assets/img/duanwu/background.png) no-repeat top left;background-size:100% 100%}
  .app-main::before{background:url(../../../assets/img/duanwu/border.png) no-repeat center center;background-size:90% 99%;padding:10px ;box-sizing: border-box;font-size:12px;color:#8db547;content: '';width: 100%;height: 100%;position: absolute;top:0}
  .app-main::after{background:url(../../../assets/img/duanwu/bambo.png) no-repeat center center;background-size:100% 100%;padding:10px ;box-sizing: border-box;font-size:12px;color:#8db547;content: '';width: 100%;height: 100%;position: absolute;top:0}
  .img-bird{width:1.1rem;position: absolute;top:0.8rem;left:0.8rem}
  .section-main{position:relative;margin: 0 auto;width:100%;padding:5%;z-index: 4}
  .content{width:80%;overflow: hidden;padding:5%;font-size:12px;word-break:break-all;line-height: 2em; margin: 20px auto;}

  .title{width:100%;position: relative;font-size: 14px}
  .cutimg{margin: 10px auto;position: relative;width:3.4rem;height:3.4rem;z-index:1;border-radius: 50%;overflow: hidden;}
  .cutimg::before{z-index:2;content:'';position: absolute;width:3.4rem;height:3.4rem;border: 10px solid rgba(178, 178, 178, 0.3);box-sizing: border-box;border-radius: 50%;}
  .img-div{width:100%;height:100%;overflow: hidden;}
  .cutimg img{width:100%;}
  .font{width:5.3rem;margin: 0 auto;position: relative; left: 0.25rem;}
  .font img{width:100%;}
  .title-content{color:#26532b;text-align: center}
  .section-bottom{position:absolute;bottom:0;width:100%}
  .section-bottom img{position:absolute;bottom:0;width:90%;z-index:2;left: 5%;}
  .show-div{position:relative;bottom:.2rem;left:0.6rem;display:inline-block;z-index:5}
  .back-div{position:relative;right:0.6rem;bottom:.2rem;float:right;display:block;z-index:5}
  .noimg-div{top:2rem}
</style>
